.switch {
	all: unset;
	position: absolute;
	right: 20px;
	top: 70px;
	display: inline-block;
	color: currentColor;
	border-radius: 50%;
	border: 1px dashed currentColor;
	cursor: pointer;
	--size: 24px;
	height: var(--size);
	width: var(--size);
	transition: all 0.3s ease-in-out 0s !important;
}

[data-mode="system"] .switch::after {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	font-weight: 600;
	font-size: calc(var(--size) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	content: "A";
}

[data-mode="light"] .switch {
	box-shadow: 0 0 50px 10px yellow;
	background-color: yellow;
	border: 1px solid orangered;
}

[data-mode="dark"] .switch {
	box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff;
	border: none;
	background: transparent;
	animation: n linear 0.5s;
}

@keyframes n {
	40% {
		transform: rotate(-15deg);
	}
	80% {
		transform: rotate(10deg);
	}
	0%,
	100% {
		transform: rotate(0deg);
	}
}
